<template>
    <section class="w-full">
        <p class="page-title">{{this.$route.name}}</p>
        <el-row class="w-full h-full">
            <el-col :span="8" class="b-r h-full">
                <el-table :data="tableData" highlight-current-row @row-click="rowClick">
                    <el-table-column label="序号"  width="80" type="index"></el-table-column>
                    <el-table-column label="角色名称" width="100" prop="roleName"></el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <el-button type="primary" icon="el-icon-plus" size="small" @click="addRole()">新增角色</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="editRole(scope.row)" type="primary" icon="el-icon-edit">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteRole(scope.row)" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="16">
                <div class="block" style="margin-left: 50px">
                    <p>界面功能配置树</p>
                    <el-tree :data="treeData" show-checkbox node-key="id"
                             :default-checked-keys="selectedFunction"
                             :props="defaultProps" ref="tree" @check="clickCheck" :check-strictly="true">
                    </el-tree>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="diaTitle" :visible.sync="showDialog"  width="40%" @close="closeRoleDialog" :close-on-click-modal=false>
            <el-form :model="roleForm" status-icon  ref="roleForm" label-width="100px" class="demo-dynamic" :rules="rules">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input v-model="roleForm.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDescribe">
                    <el-input v-model="roleForm.roleDescribe" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeRoleDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm('roleForm')" :loading="giveRoleFormLoading">保 存</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>

    export default {
        name: "routerManager",
        data() {
            return {
                tableData: [],
                treeData: [],
                showDialog: false,
                formLabelWidth: '120px',
                diaTitle: '新增角色',
                giveRoleFormLoading: false,
                roleForm: {
                    roleId: '',
                    roleName: '',
                    roleDescribe: ''
                },
                rules: {
                    roleName: [
                        {
                            required: true,
                            message: '请输入角色名',
                            trigger: 'blur'
                        }
                    ]
                },
                selectedFunction: [

                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                roleId: '',
                requestMethod: '',
            }
        },
        created() {
            this.queryRoles();
            this.$http({
                url: '/function/getFunctionsElementTree',
                method: 'get',
                params: {}
            })
            .then((response) => {
                this.treeData = response;
            })
        },
        methods: {
            queryRoles() {
                this.$http({
                    url: '/role/roles',
                    method: 'get',
                    params: {}
                })
                .then((response) => {
                    this.tableData = response
                })
            },
            rowClick(row) {
                this.roleId = row.roleId;
                this.$http({
                    url: '/role-function/roleFunction/roleId/'+row.roleId,
                    method: 'get',
                    params: {}
                })
                .then((response) => {
                    this.resetChecked();
                    this.selectedFunction = response;
                })
            },
            addRole() {
                this.roleForm.roleId = '';
                this.roleForm.roleName = '';
                this.roleForm.roleDescribe = '';
                this.showDialog = true;
                this.requestMethod = 'post';
            },
            editRole(row) {
                this.roleForm.roleId = row.roleId;
                this.roleForm.roleName = row.roleName;
                this.roleForm.roleDescribe = row.roleDescribe;
                this.showDialog = true;
                this.requestMethod = 'put';
            },
            deleteRole(row) {
                let roleId = row.roleId;
                this.$confirm('将删除角色'+row.roleName+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: '/role/role/'+roleId,
                        method: 'delete',
                        params: {}
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.queryRoles();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addOrEditRole();
                    } else {
                        return false;
                    }
                });
            },
            addOrEditRole() {
                this.giveRoleFormLoading = true;
                this.$http({
                    url: '/role/role',
                    method: this.requestMethod,
                    data: this.$qs.stringify(this.roleForm)
                })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.showDialog = false;
                    this.queryRoles();
                    this.giveRoleFormLoading = false;
                }).catch(() =>{
                    this.giveRoleFormLoading = false;
                })
            },
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            },
            clickCheck(currentNode, selectedNode){
                if(this.roleId==''){
                    return;
                }
                let click = 'unselected';
                let currentId = currentNode.id;
                let selectedIds = selectedNode.checkedKeys;
                for(let selectedId of selectedIds){
                    if(selectedId==currentId){
                        click = 'selected';
                    }
                }
                if(click=='selected'){
                    this.$http({
                        url: '/role-function/roleFunction',
                        method: 'post',
                        data: this.$qs.stringify({
                            roleId: this.roleId,
                            functionId: currentId,
                        })
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    })
                }else if(click=='unselected'){
                    this.$http({
                        url: '/role-function/roleFunction/function/'+currentId+'/roleId/'+this.roleId,
                        method: 'delete',
                        params: {}
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    })
                }
            },
            closeRoleDialog() {
                this.showDialog = false;
                this.$refs["roleForm"].resetFields();
            }
        }
    }
</script>

<style scoped>
    .custom-tree-node-btn{
        padding-left: 40px;
    }
</style>